<template>
    <h1>APP 组件 --- {{ num }}</h1>

    <button @click="addNum">点击修改 num</button>
</template>

<script setup>
/**
 *  setup 是一个语法糖
 *
 *      能够帮助我们简洁的书写 组合式 API
 *
 *  以前 setup 没有语法糖的时候, 他是一个选项
 *      在这个选项内书写的 变量或者函数, 需要在最后 通过 return 返回出去, 然后页面才能使用
 *      但是现在有了语法糖之后, 我们不需要手动书写 return
 *
 *  以前如果需要引入一个组件, 还需要注册完毕, 才能使用
 *  在当前语法糖中, 你只需要引入一个组件, 这个组件会被自动注册, 我们直接使用即可
 */

//  当前 num 的值是一个 普通的数字, 不是响应式数据, 所以修改 num 不会让页面发生变化
//  除非我们将 num 修改为 响应式数据
let num = 100;

function addNum() {
    num++;
    console.log("num 最新的值: ", num);
}

// export default {
//     setup () {
//         let num = 100
//         function setNum {
//             num++
//         }
//         return {
//             num,
//             setNum
//         }
//     }
// }
</script>
